import React, { useState, useEffect } from "react";
import "./style.scss";
import { InterfaceG } from "@config/Config";
import yhTools from "@tools/yh";
import { Toast } from "antd-mobile";
import MainLayout from "@component/mainLayout/mainLayout";
import CouponItem from "@views/viewCommon/CouponItem";
const Coupon = props => {
	const [couponCenterList, set_couponCenterList] = useState();
	const [queryNotGetCoupon, set_queryNotGetCoupon] = useState([]);

	/*******************业务方法 start************************/

	/**
	 * @msg:未领取的优惠券数量
	 * @param {*}
	 * @return {*}
	 */
	function couponCenter_queryNotGetCoupon() {
		return new Promise((resolve, reject) => {
			const params = {
				url: InterfaceG.couponCenter_queryNotGetCoupon
			};
			yhTools.request(params).then(res => {
				resolve();
				if (res.code === "0") {
					set_queryNotGetCoupon(res.data);
				} else {
					Toast.info(res.message, 2);
				}
			});
		});
	}

	/**
	 * @msg: 获取我的卡券数据
	 * @param {*}
	 * @return {*}
	 */
	function getCardListInfo() {
		return new Promise((resolve, reject) => {
			const params = {
				url: InterfaceG.myCoupons,
				params: {},
				_alertShow: false
			};
			yhTools.request(params).then(res => {
				resolve();
				if (res.code === "0") {
					set_couponCenterList(res.data.myCouponList);
				} else {
					Toast.info(res.message, 2);
				}
			});
		});
	}

	/**
	 * @msg: 查询授信状态
	 * @param {*}
	 * @return {*}
	 */
	const credit_queryCreditApplyStatus = () => {
		Toast.loading("加载中", 100);
		const objs = {
			url: InterfaceG.credit_queryCreditApplyStatus,
			params: { pruductNum: "601" }
		};
		yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.code === "0") {
				if (res.data) {
					const { applyStatus } = res.data;
					//0未授信，1已授信，2授信中，4授信拒绝
					let pathname = "";
					if (applyStatus === "0") {
						pathname = "/xhfHomeNoCredit";
					} else if (applyStatus === "1") {
						pathname = "/xhfHomeCredit";
					} else if (applyStatus === "2") {
						pathname = "/xhfHomeCrediting";
					} else if (applyStatus === "4") {
						pathname = "/xhfHomeNoCredit";
					}
					props.history.push({
						pathname
					});
				}
			} else {
				Toast.info(res.message, 2);
			}
		});
	};

	/**
	 * @msg:初始化页面数据
	 * @param {*}
	 * @return {*}
	 */
	const initData = () => {
		Toast.loading("加载中", 100);
		let p_couponCenter_queryNotGetCoupon = couponCenter_queryNotGetCoupon();
		let p_getCardListInfo = getCardListInfo();
		Promise.all([p_couponCenter_queryNotGetCoupon, p_getCardListInfo]).finally(
			() => {
				Toast.hide();
			}
		);
	};

	/*******************业务方法 end************************/
	useEffect(() => {
		initData();
	}, []);
	/*******************点击事件 start************************/

	/**
	 * @msg:
	 * @param {*} i //
	 * @return {*}
	 */
	/**
	 * @msg: 立即领取
	 * @param {*} advance 优惠券状态，2，待激活，0去使用；
	 * @param {*} i 索引
	 * @return {*}
	 */
	const receive = (advance, i) => {
		if (advance === "2") {
			return props.history.push(
				`/activateCoupon/${couponCenterList[i].activityCouponNo}`
			);
		} else {
			credit_queryCreditApplyStatus();
		}
	};

	/*******************点击事件 start************************/
	let _pageParams = {
		header: {
			title: "优惠券",
			headerBackground: "#fff",
			titleColor: "#232323",
			newBackButt: true,
			rightButt: "使用记录",
			rightButtColor: "#353535",
			rightButtCallBack: () => {
				props.history.push({
					pathname: "/paymentDiscount/useRecord"
				});
			}
		},
		history: props.history,
		cacheLifecycles: props.cacheLifecycles
	};
	return (
		<MainLayout pageParams={_pageParams}>
			<div className="page-coupon">
				<div className="coupon-header ui-flex ui-flex-justify-space-between ui-flex-align-center">
					<div className="header-num f-24 c-fff">
						您有{queryNotGetCoupon}张优惠券待领取
					</div>
					<div
						className="header-go ui-flex ui-flex-align-center"
						onClick={() => {
							props.history.push({
								pathname: "/paymentDiscount/collectCouponCenter"
							});
						}}
					>
						<span className="go-text f-24 c-fff">去领取</span>
						<i className="go-icon"></i>
					</div>
				</div>
				<div className="coupon-list">
					{couponCenterList &&
						couponCenterList.length > 0 &&
						couponCenterList.map((v, i, a) => {
							return (
								<CouponItem
									styleType={
										v.couponTypeNo === "01" || v.couponTypeNo === "02"
											? "1"
											: "2"
									}
									couponStatus={v.advance === "2" ? "1" : "0"}
									key={`${v.couponName}${i}`}
									item={v}
									index={i}
									couponArray={a}
									receive={() => {
										receive(v.advance, i);
									}}
								/>
							);
						})}
					{couponCenterList && couponCenterList.length === 0 && (
						<div className="list-noData ui-flex ui-flex-column ui-flex-align-center">
							<div className="noData-pic ui-flex ui-flex-justify-center ">
								<div className="noData-icon"></div>
							</div>
							<div className="noData-tips f-28 c-666">
								您还没有优惠券哦
								<br />
								赶快去领券中心领取吧~
							</div>
							<div
								className="noData-btn f-26"
								onClick={() => {
									props.history.push({
										pathname: "/paymentDiscount/collectCouponCenter"
									});
								}}
							>
								去领券
							</div>
						</div>
					)}
				</div>
				{couponCenterList && couponCenterList.length > 0 && (
					<div className="coupon-more f-24 c-999">
						- 已经看完了，没有更多了-
					</div>
				)}
				<div className="coupon-btn f-32 f-b ui-flex ui-flex-algin-center">
					<div
						className="btn-l ui-flex ui-col ui-flex-justify-center ui-flex-align-center"
						onClick={() => {
							props.history.push({
								pathname: "/paymentDiscount/index"
							});
						}}
					>
						更多支付优惠
					</div>
					<div
						className="btn-r ui-flex ui-col ui-flex-justify-center ui-flex-align-center"
						onClick={() => {
							props.history.push({
								pathname: "/paymentDiscount/collectCouponCenter"
							});
						}}
					>
						<div className="btn-word">
							<div className="word-text">去领券</div>
							<div className="word-marker ui-flex ui-flex-justify-center ui-flex-align-center">
								<span className="marker-text f-22 c-fff">抢神券</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</MainLayout>
	);
};

export default Coupon;
